<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

      #box{
        width: 400px;
			height: 400px;
			margin: auto;
 
      }

    </style>
</head>
<body>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
 
    <div id="box">
    	
    	<div><span>搜索名称：</span><input type="text" v-model="msg" @blur="find()"><!-- {{msg}} --></div>
    	<div>
    		<table border="1">
    			<tr>
    				<td>Name</td>
    				<td>Gender</td>
    				<td>Age</td>
    			</tr>
    			<tr v-for="item in arr2">
    				<td>{{item.Name | big}}</td>
    				<td>{{item.Gender}}</td>
    				<td>{{item.Age}}</td>
    			</tr>
			
    		</table>
    	</div>
    </div>
 
    <script>
    	var vm = new Vue({
    		el:'#box',
    		data:{
    			arr:[{Name:"rick",Gender:"male",Age:"21"},
    			{Name:"demen",Gender:"male",Age:"21"},
    			{Name:"Jack",Gender:"male",Age:"26"},
    			{Name:"John",Gender:"female",Age:"20"},
    			{Name:"Lucy",Gender:"female",Age:"16"}],
    			msg:"",
    			arr2:[]
    		},
    		methods:{
    			find(){
    				let str = this.msg;
    				let arr3 = [];
        
    				this.arr.forEach(function(item){
    					if (str.toLowerCase()==((item.Name).slice(0,str.length)).toLowerCase()) {
    						arr3.push(item);
    					}
    				})
                  
    				this.arr2 = arr3;
    			}
    		},
    		filters:{
    			big:function(value){
    				result = value.slice(0,1).toUpperCase()+value.slice(1,value.length);
    				return result;
    			},
 
    		}
    	})//alert(stmp.slice(1,5))//从第2个字符开始，到第5个字符；返回"cinn"
    </script>
   
</body>
</html>
